<template>
  <a-modal v-model="visible" title="导入上期数据" :footer="null" @cancel="close">
    <f-form ref="form" >
      <f-form-item label="月份:" name="financeMonth" type="month" :value.sync="formItem.financeMonth" :required="true"/>
      <f-form-item label='供货方' ref='supplier' type='select' name='deptId' :value.sync='formItem.supplierId' :data='api.supplier.list'
                   valueKey='supplierId' label-key='supplierName' :required='true' @change='supplierChange' />
    </f-form>
    <a-upload-dragger
      :action="getUrl"
      :headers="accessToken"
      :accept="accept"
      :data="data"
      :beforeUpload="beforeUpload"
      @change="handleChange"
      :showUploadList="false"
      ref="up"
      class="upload"
    >
      <p class="ant-upload-drag-icon" style="margin-top: 10px">
        <a-icon type="inbox"/>
      </p>
      <p class="ant-upload-text">
        单击或拖动文件到此区域上传
      </p>
      <p class="ant-upload-hint">
        {{tip}}
      </p>
    </a-upload-dragger>
  </a-modal>
</template>

<script>
  import api from './js/api'
  import Vue from 'vue'

  export default {
    name: 'UploadFinanceModal',
    model: {
      prop: 'value',
      event: 'change.value'
    },
    props: {
      width: {
        type: String,
        default: '250px'
      },
      action: {
        type: String,
        default: ''
      },
      fileSize: {
        default: 204800
      },
      value: {
        type: [String, Array],
        default: ''
      },
      tip: {
        type: String,
        default: ''
      },
      accept: {
        type: [String],
        default: '.*'
      },
      otherParams: {}
    },
    computed: {
      fileMaxSize: {
        get: function() {
          if (this.fileSize >= 1024 && this.fileSize < 1048576) {
            this.sizeUnit = 'M'
            return Number(this.fileSize / 1024).toFixed(2)
          }
          if (this.fileSize >= 1048576) {
            this.sizeUnit = 'G'
            return Number(this.fileSize / 1024 / 1024).toFixed(2)
          } else {
            this.sizeUnit = 'KB'
            return this.fileSize
          }
        }
      }
    },
    watch: {
      value(value) {
        if (value != '' && typeof value == 'string') {
          this.FileUrl = value
        }
      }
    },
    data() {
      return {
        refs: this.$refs,
        api: Object.assign(api, this.api),
        accessToken: {},
        visible: false,
        url: '',
        sizeUnit: 'KB',
        data: {},
        FileUrl: '',
        fileId: '',
        removeIds: [],
        loading: false,
        viewImage: false,
        btnText: '选择文件',
        formItem: {
          financeMonth: '',
          supplierId: null
        }
      }
    },
    methods: {
      getUrl() {
        let env = process.env.NODE_ENV
        if (env == "development") {
          return "/base/" + this.action
        } else {
          return process.env.VUE_APP_API_BASE_URL + "/" + this.action
        }
      },
      open() {
        this.visible = true
      },
      close() {
        this.visible = false
        this.$refs.form.getForm().resetFields()
      },
      supplierChange(value) {
        this.formItem.supplierId = value
      },
      init() {
        const token = Vue.ls.get('Access-Token')
        this.accessToken = {
          Authorization: token
        }
      },
      handleFormatError(file) {
        this.loading = false
        this.$notification.warning({
          title: '不支持的文件格式',
          desc: '所选文件‘ ' + file.name + ' ’格式不正确, 请选择' + this.accept + '格式文件'
        })
      },
      handleMaxSize(file) {
        this.loading = false
        this.$notification.warning({
          title: '文件大小过大',
          desc: '所选文件‘ ' + file.name + ' ’大小过大,不得超过' + this.fileMaxSize + this.sizeUnit
        })
      },
      beforeUpload() {
        const form = this.$refs.form.getForm()
        form.validateFields((valid, values) => {
          if (valid) {
            this.$message.error('缺少参数')
            return false
          } else {
            this.data = this.formItem
          }
        })
        this.loading = true
        this.btnText = '上传中...'
        this.$emit('on-before')
        return true
      },
      handleError(error, file, fileList) {
        this.loading = false
        this.$message.error(error.toString())
      },
      inputChange(e) {
        this.FileUrl = e.target.value
      },
      handleChange({ file, fileList, event }) {
        if (file.status != 'uploading') {
          let url = ''
          if (file.response) {
            url = file.response.data.url
            this.fileId = file.response.data.uid
            this.btnText = '上传文件'
            this.loading = false
          }
          if (file.status == 'removed') {
            if (file.response) {
              this.removeIds.push(file.response.data.uid)
            } else {
              this.removeIds.push(file.uid)
            }
          }
          if (this.formItem.financeMonth && this.formItem.supplierId) {
            this.$emit('change', url, file, this.fileId, this.removeIds)
          }
        }
      }
    },
    created() {
      const baseUrl = process.env.VUE_APP_API_BASE_URL
      this.url += baseUrl + '/' + this.action
      this.init()
      if (this.value) {
        this.FileUrl = this.value
      }
    }
  }
</script>

<style lang="less">
  .upload {
    display: inline-block;
    margin-left: 10px;

    .ant-upload-hint {
      heigh: 300px;
      width: 450px
    }
  }
</style>

